<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
      <!--  重保巡检   -->
      <ViewDialog title="查看" class="fixed-dialog-height" :show.sync="inspectionShowDialog" width="80%" @on-cancel="inspectionViewCancel">
        <InspectionViewForm :id="editId" ref="inspectionViewForm" :register-code="registerCode" :unit-name="unitName" :inspection-status="inspectionStatus" />
      </ViewDialog>
      <FormDialog title="编辑" class="fixed-dialog-height" :submit-display="true" confirm-text="保存" :show.sync="inspectionEditDialog" width="80%" @on-submit="inspectSubmit" @on-ok="inspectionOk" @on-cancel="inspectionCancel">
        <InspectionEditForm :id="editId" ref="inspectionEditForm" :register-code="registerCode" :unit-name="unitName" :inspection-status="inspectionStatus" />
      </FormDialog>
      <!--  每日上报   -->
      <ViewDialog title="查看" class="fixed-dialog-height" :show.sync="reportEditDialog" width="80%" @on-cancel="reportCancel">
        <ReportEditForm v-if="reportEditDialog" :id="editId" ref="reportEditForm" :register-code="registerCode" :unit-name="unitName" :start-time="startTime" :end-time="endTime" />
      </ViewDialog>
      <!--  服务总结   -->
      <ViewDialog title="查看" class="fixed-dialog-height" :show.sync="summaryShowDialog" width="80%" @on-cancel="summaryViewCancel">
        <SummaryViewForm :id="editId" ref="summaryViewForm" :register-code="registerCode" :unit-name="unitName" />
      </ViewDialog>
      <FormDialog title="编辑" class="fixed-dialog-height" :show.sync="summaryEditDialog" width="80%" @on-ok="summaryOk" @on-cancel="summaryCancel">
        <SummaryEditForm :id="editId" ref="summaryEditForm" :register-code="registerCode" :unit-name="unitName" />
      </FormDialog>
    </div>
  </div>
</template>
<script>
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { page } from '@neu/dcom-ui/api/insuranceRegisterTask'
import { formatDate } from '@neu/biz-core/utils/utils'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import FormDialog from '@neu/biz-core/components/FormDialog'
import InspectionEditForm from './components/inspectionEditForm'
import InspectionViewForm from './components/inspectionViewForm'
import ReportEditForm from './components/reportEditForm'
import SummaryViewForm from './components/summaryViewForm'
import SummaryEditForm from './components/summaryEditForm'
export default {
  name: 'RegisterTaskPage',
  components: {
    TableFilter,
    PageableTable,
    ViewDialog,
    FormDialog,
    InspectionEditForm,
    InspectionViewForm,
    SummaryEditForm,
    SummaryViewForm,
    ReportEditForm
  },
  mixins: [databind],
  data() {
    return {
      r: page,
      insideColumns: [
        { title: '服务编号', key: 'registerCode', width: '150' },
        { title: '服务厅局', key: 'unitName', width: '200' },
        { title: '服务开始时间', key: 'startTime',
          render: (h, params) => {
            return (<span> { formatDate(params.row.startTime, 'YYYY-MM-DD') } </span>)
          }
        },
        { title: '服务结束时间', key: 'endTime',
          render: (h, params) => {
            return (<span>{formatDate(params.row.endTime, 'YYYY-MM-DD')}</span>)
          }
        },
        { title: '备注信息', key: 'registerRemarks', width: '200' },
        { title: '服务前巡检', key: 'beforeInspectionStatus',
          render: (h, params) => {
            const inspectionStatus = params.row.beforeInspectionStatus
            const inspectionType = 'before'
            let text = ''
            let tagType = ''
            if (inspectionStatus === 'notActive') {
              text = '未激活'
              tagType = 'info'
            } else if (inspectionStatus === 'pending') {
              text = '待处理'
              tagType = 'primary'
            } else if (inspectionStatus === 'completed') {
              text = '已完成'
              tagType = 'success'
            }
            return h('el-tag', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: text },
                props: { type: tagType },
                on: { click: () => { this.inspectionView(params.row.id, inspectionStatus, params.row, inspectionType) } }},
              text)
            ])
          }
        },
        { title: '每日状态上报', key: 'everyDayStatus',
          render: (h, params) => {
            const num = params.row.completeReportedNum + '/' + params.row.totalReportedNum
            let tagType = ''
            if (params.row.completeReportedNum === params.row.totalReportedNum) {
              tagType = 'success'
            } else {
              tagType = 'primary'
            }
            return h('el-tag', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: num },
                props: { type: tagType },
                on: { click: () => { this.reportView(params.row.id, params.row) } }},
              num)
            ])
          }
        },
        { title: '服务后巡检', key: 'afterInspectionStatus',
          render: (h, params) => {
            const inspectionStatus = params.row.afterInspectionStatus
            const inspectionType = 'after'
            let text = ''
            let tagType = ''
            if (inspectionStatus === 'notActive') {
              text = '未激活'
              tagType = 'info'
            } else if (inspectionStatus === 'pending') {
              text = '待处理'
              tagType = 'primary'
            } else if (inspectionStatus === 'completed') {
              text = '已完成'
              tagType = 'success'
            }
            return h('el-tag', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: text },
                props: { type: tagType },
                on: { click: () => { this.inspectionView(params.row.id, inspectionStatus, params.row, inspectionType) } }},
              text)
            ])
          }
        },
        { title: '服务总结', key: 'summaryStatus',
          render: (h, params) => {
            const summaryStatus = params.row.summaryStatus
            let text = ''
            let tagType = ''
            if (summaryStatus === 'notActive') {
              text = '未激活'
              tagType = 'info'
            } else if (summaryStatus === 'pending') {
              text = '待处理'
              tagType = 'primary'
            } else if (summaryStatus === 'completed') {
              text = '已完成'
              tagType = 'success'
            }
            return h('el-tag', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: text },
                props: { type: tagType },
                on: { click: () => { this.summaryView(params.row.id, summaryStatus, params.row) } }},
              text)
            ])
          }
        },
        { title: '完成状态', key: 'status',
          render: (h, params) => {
            if (params.row.status === 'pending') {
              return (<el-tag type='primary' size='small'> 未完成 </el-tag>)
            } else {
              return (<el-tag type='success' size='small'> 已完成 </el-tag>)
            }
          }
        }
      ],
      // 共用传递参数
      editId: -1,
      registerCode: '',
      unitName: '',
      startTime: '',
      endTime: '',
      // 重保服务巡检
      inspectionStatus: '',
      inspectionShowDialog: false,
      inspectionEditDialog: false,
      // 每日上报
      reportEditDialog: false,
      // 服务总结
      summaryShowDialog: false,
      summaryEditDialog: false
    }
  },
  methods: {
    inspectionView(id, inspectionStatus, row, inspectionType) {
      // 打开对话框
      console.log(row)
      this.editId = id
      this.registerCode = row.registerCode
      this.unitName = row.unitName
      this.inspectionStatus = inspectionType
      if (inspectionStatus === 'pending') {
        this.inspectionEditDialog = true
      } else if (inspectionStatus === 'completed') {
        this.inspectionShowDialog = true
      }
    },
    inspectionOk() {
      // 直接调用表单实例的保存方法
      this.$refs.inspectionEditForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '保存成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.inspectionEditDialog = false
        this.inspectionShowDialog = false
      })
    },
    inspectionCancel() {
      this.editId = -1
      this.$refs.inspectionEditForm.reset()
      // 关闭对话框
      this.inspectionEditDialog = false
      this.inspectionShowDialog = false
    },
    inspectionViewCancel() {
      this.editId = -1
      // 关闭对话框
      this.inspectionEditDialog = false
      this.inspectionShowDialog = false
    },
    inspectSubmit() {
      // 直接调用表单实例的保存方法
      this.$refs.inspectionEditForm.submit().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '提交成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.inspectionEditDialog = false
        this.inspectionShowDialog = false
      })
    },
    reportView(id, row) {
      // 打开对话框
      console.log(row)
      this.editId = id
      this.registerCode = row.registerCode
      this.unitName = row.unitName
      this.startTime = formatDate(row.startTime, 'YYYY-MM-DD')
      this.endTime = formatDate(row.endTime, 'YYYY-MM-DD')
      this.reportEditDialog = true
    },
    reportCancel() {
      this.editId = -1
      this.refresh()
      // 关闭对话框
      this.reportEditDialog = false
    },
    // 服务总结
    summaryView(id, summaryStatus, row) {
      // 打开对话框
      this.editId = id
      this.registerCode = row.registerCode
      this.unitName = row.unitName
      if (summaryStatus === 'pending') {
        this.summaryEditDialog = true
      } else if (summaryStatus === 'completed') {
        this.summaryShowDialog = true
      }
    },
    summaryOk() {
      // 直接调用表单实例的保存方法
      this.$refs.summaryEditForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '保存成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.summaryEditDialog = false
        this.summaryShowDialog = false
      })
    },
    summaryCancel() {
      this.editId = -1
      this.$refs.summaryEditForm.reset()
      // 关闭对话框
      this.summaryEditDialog = false
      this.summaryShowDialog = false
    },
    summaryViewCancel() {
      this.editId = -1
      // 关闭对话框
      this.summaryEditDialog = false
      this.summaryShowDialog = false
    }
  }
}
</script>
